<template>
	<coreshop-page class="page" title="我的团队" mode="left"
		:customStyle="{'height':'100%','display': 'flex','flex-direction': 'column'}" :contentStyle="{'flex':'1'}">
		<view class="content">
			<view class="header">
				<view class="recommend">推荐人：{{state.referrerInfo?.nickname || '无'}}</view>
				<view class="team_card">
					<view class="left">
						<view class="total_box">
							<view class="label">团队总人数(人)</view>
							<view class="team_count">{{state.userInfo?.count || 0}}</view>
						</view>
						<view class="level_box">
							<view class="one_level">
								<view class="label">一级成员</view>
								<view class="count">{{state.userInfo?.first || 0}}</view>
							</view>
							<view class="two_level">
								<view class="label">二级成员</view>
								<view class="count">{{state.userInfo?.second || 0}}</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="total_box">
							<view class="label">本月推广人数(人)</view>
							<view class="spread_count">{{state.userInfo?.monthCount || 0}}</view>
						</view>
						<view class="level_box">
							<view class="one_level">
								<view class="label">一级成员</view>
								<view class="count">{{state.userInfo?.monthFirst || 0}}</view>
							</view>
							<view class="two_level">
								<view class="label">二级成员</view>
								<view class="count">{{state.userInfo?.monthSecond || 0}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="list" v-if="state.list?.length">
				<view class="item" v-for="item in state.list" :key="item.id">
					<image class="avatar" :src="item.avatarImage"></image>
					<view class="nick-box">
						<view class="name-box">
							<view class="name">{{item.nickName}}</view>
							<view class="mobile">{{item.mobile}}</view>
						</view>
						<view class="time-box">
							<view class="name">{{timeFormat(item.createTime,'yyyy年mm月dd日')}}</view>
							<view class="mobile">下级成员：{{item.childNum}}人</view>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
			</view>
		</view>

	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { queryTeamSum, queryDistributionMyInvite, queryDistributionRecommend } from '@/core/api';
	import type { Response } from '@/core/models';
	import { EmptyEnum } from '@/core/enum';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

	const state = reactive<{
		referrerInfo : any;
		userInfo : any;
		page : number;
		totalPages : number;
		list : Array<any>;
	}>({
		referrerInfo: {},
		userInfo: {},
		page: 1,
		totalPages: 1,
		list: [],
	})

	onLoad(() => {
		getMyInvite();
		getTeamSum();
		getDistributionRecommend();
	})

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getDistributionRecommend();
		}
	});

	/** 获取上级邀请人 */
	const getMyInvite = async () => {
		const myInvite : Response<any> = await queryDistributionMyInvite();
		if (myInvite.status) {
			state.referrerInfo = myInvite.data;
		}
	}

	/** 获取面板统计数字 */
	const getTeamSum = async () => {
		const teamSum : Response<any> = await queryTeamSum();
		if (teamSum.status) {
			state.userInfo = teamSum.data;
		}
	}

	/** 获取邀请列表 */
	const getDistributionRecommend = async () => {
		const recommend : Response<Array<any>> = await queryDistributionRecommend({
			page: state.page,
			limit: 10,
		})
		if (recommend.status) {
			state.totalPages = recommend.otherData?.totalPages;
			state.list = state.list.concat(recommend.data);
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>